<template>
	<yb-list
	custom-class="yb-flex-1"
	ref="list"
	type="page"
	:bounce="bounce"
	:empty="emptySync"
	:loading="loadingSync"
	:pulldown="pulldownSync"
	:loadmore="loadmoreSync"
	:enableScrolling="enableScrolling"
	@scroll="onScroll"
	@pulldown="onPulldown"
	@loadmore="onLoadmore">
		<slot></slot>
		<yb-list-item v-for="(item, index) in recomes" :key="item.detailUrl + '_' + index">
			<view @tap="onItemClick(item)" class="cell_4 yb-flex yb-row margin-gap" :style="{
				'border-bottom-color': skinColor.color_gap_1
			}">
				<view class="yb-flex yb-flex-1 yb-justify-between">
					<yb-text custom-class="yb-flex-1" weight="bold" :lines="3" size="33" :color="skinColor.color_1" :value="item.title || getDesc(item)"></yb-text>
					<view class="yb-flex yb-row yb-align-center" :style="{
						'margin-top': item.cover ? '' : '20rpx'
					}">
						<yb-text custom-style="margin-left: 10rpx" custom-class="yb-flex-1" :size="24" :lines="1" :color="skinColor.color_3" :value="item.creator || '佚名'" />
						<yb-text custom-style="margin-left: 20rpx" :size="26" :color="skinColor.color_3" :value="item.updateTime"></yb-text>
					</view>
				</view>
				<view class="cover-box yb-flex" v-if="item.cover">
					<rd-image lazyLoad :borderRadius="12" class="yb-flex-1" mode="aspectFill" :src="item.cover"></rd-image>
					<text elevation="3" class="badeg" v-if="item.isVip" :style="{
						top: '15rpx',
						'background-color': skinColor.color_yellow,
						color: skinColor.color_white
					}">付费</text>
				</view>
			</view>
		</yb-list-item>
		<slot name="center"></slot>
		<yb-list-item v-for="(item, index) in list" :key="index">
			<view class="yb-comment yb-flex" :style="{'border-bottom-color': skinColor.color_gap_1}">
				<view class="top yb-flex yb-row yb-align-center">
					<yb-avatar enablePreview size="60" class="avatar" lazy-load :src="item.avatar" v-if="item.avatar"></yb-avatar>
					<view class="info yb-flex yb-justify-between">
						<yb-text :size="26" :color="skinColor.color_2" :lines="1" :value="item.title" />
						<yb-text :size="20" :color="skinColor.color_2" :lines="1" :value="item.subtitle" />
					</view>
				</view>
				<view class="bottom" :style="{'padding-left': item.avatar ? '80rpx' : 0}" v-if="item.masterComments && item.masterComments.length > 0">
					<view class="child" :style="{'background-color': skinColor.color_gap_1}" v-if="item.masterComments.length > 0">
						<view class="list" :style="{'border-color': skinColor.color_gap_1}" v-for="(child, i) in item.masterComments" :key="i">
							<view class="top yb-flex yb-row yb-align-center">
								<yb-avatar enablePreview size="60" class="avatar" lazy-load :src="child.avatar" v-if="child.avatar"></yb-avatar>
								<view class="info yb-flex yb-justify-between">
									<yb-text :size="26" :color="skinColor.color_2" :lines="1" :value="child.title" />
									<yb-text :size="20" :color="skinColor.color_2" :lines="1" :value="child.subtitle" />
								</view>
							</view>
							<view class="bottom" :style="{'padding-left': child.avatar ? '80rpx' : 0}">
								<text class="content" @longpress="copyComment(child)" :style="{color: skinColor.color_1}">{{handleEmojiText(child.content)}}</text>
							</view>
						</view>
					</view>
					<text class="content" @longpress="copyComment(item)" :style="{color: skinColor.color_1}">回复：{{handleEmojiText(item.content)}}</text>
				</view>
				<view class="bottom" :style="{'padding-left': item.avatar ? '80rpx' : 0}" v-else>
					<text class="content" @longpress="copyComment(item)" :style="{color: skinColor.color_1}">{{handleEmojiText(item.content)}}</text>
					<view class="child" :style="{'background-color': skinColor.color_gap_1}" v-if="item.subComments && item.subComments.length > 0">
						<view class="list" :style="{'border-color': skinColor.color_gap_1}" v-for="(child, i) in item.subComments.slice(0, moreShows[index] ? item.subComments.length : 1)" :key="i">
							<view class="top yb-flex yb-row yb-align-center">
								<yb-avatar enablePreview size="60" class="avatar" lazy-load :src="child.avatar" v-if="child.avatar"></yb-avatar>
								<view class="info yb-flex yb-justify-between">
									<yb-text :size="26" :color="skinColor.color_2" :lines="1" :value="child.title" />
									<yb-text :size="20" :color="skinColor.color_2" :lines="1" :value="child.subtitle" />
								</view>
							</view>
							<view class="bottom" :style="{'padding-left': child.avatar ? '80rpx' : 0}">
								<text class="content" @longpress="copyComment(child)" :style="{color: skinColor.color_1}">{{handleEmojiText(child.content)}}</text>
							</view>
						</view>
					</view>
					<view class="more yb-flex yb-row yb-align-center" v-if="item.subComments && item.subComments.length > 1" @tap="showMore(index)">
						<text class="more-text" :style="{color: skinColor.color_blue}">{{ moreShows[index] ? '收起更多回复' : '查看更多回复'}}</text>
						<view class="arrow" :class="{'arrow-up': moreShows[index], 'arrow-down': !moreShows[index]}" :style="{'border-color': skinColor.color_blue}"></view>
					</view>
				</view>
			</view>
		</yb-list-item>
		<slot name="bottom"></slot>
	</yb-list>
</template>

<script>
	import appMixin from '@/common/mixin/app.js';
	import HTMLParser from '@/uni_modules/html-parser/js_sdk/index.js';
	import emojis from '@/assets/other/emoji.js'
	export default {
		mixins: [appMixin],
		props: {
			recomes: {
				type: Array,
				default () {
					return new Array
				}
			},
			list: {
				type: Array,
				default () {
					return new Array
				}
			},
			index: {
				type: [Number,String],
				default: -1
			},
			enableScrolling: {
				type: Boolean,
				default: false
			},
			bounce: {
				type: Boolean,
				default: true
			},
			loading: {
				type: [Boolean,Object,String],
				default: false
			},
			empty: {
				type: [Boolean,Object,String],
				default: false
			},
			pulldown: {
				type: [Boolean,Object],
				default: false
			},
			loadmore: {
				type: [Boolean,Object],
				default: false
			},
			//开启自定义点击事件
			customclickenable: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			emptySync () {
				return Object.assign({}, {
					show: false,
					text: '暂无评论',
					color: this.skinColor.color_gap_1,
					bgColor: this.skinColor.color_bg_1
				}, this.app.$utils.typeof(this.empty) == 'String' ? {text: this.empty} : this.app.$utils.typeof(this.empty) == 'Boolean' ? {show: this.empty} : this.empty)
			},
			loadingSync () {
				return Object.assign({}, {
					show: false,
					text: '加载中',
					color: this.skinColor.color_1,
					bgColor: this.skinColor.color_bg_1
				}, this.app.$utils.typeof(this.loading) == 'String' ? {text: this.loading} : this.app.$utils.typeof(this.loading) == 'Boolean' ? {show: this.loading} : this.loading)
			},
			pulldownSync () {
				return Object.assign({}, {
					show: false,
					color: this.skinColor.color_1
				}, this.app.$utils.typeof(this.pulldown) == 'Boolean' ? {show: this.pulldown} : this.pulldown)
			},
			loadmoreSync () {
				return Object.assign({}, {
					show: !this.isLastPage,
					color: this.skinColor.color_1
				}, this.app.$utils.typeof(this.loadmore) == 'Boolean' ? {show: this.loadmore} : this.loadmore)
			}
		},
		data () {
			return {
				page: 1,
				size: 20,
				isLoadmoreEnd: false,
				moreShows: {}
			}
		},
		methods: {
			onPulldown (callback) {
				if ( this.index > -1 ) {
					this.$emit('pulldown', this.index, callback)
				} else {
					this.$emit('pulldown', callback)
				}
			},
			onLoadmore (callback) {
				if ( this.index > -1 ) {
					this.$emit('loadmore', this.index, callback)
				} else {
					this.$emit('loadmore', callback)
				}
			},
			resetLoadmore () {
				this.$refs.list.resetLoadmore()
			},
			setLoadmoreEnd () {
				this.$refs.list.setLoadmoreEnd()
			},
			setLoadmoreSuccess() {
				this.$refs.list.setLoadmoreSuccess()
			},
			setLoadmoreFail() {
				this.$refs.list.setLoadmoreFail()
			},
			showMore (index) {
				if ( this.moreShows[index] ) {
					this.$set(this.moreShows, index, 0)
				} else {
					this.$set(this.moreShows, index, 1)
				}
			},
			copyComment (params) {
				uni.setClipboardData({
				    data: params.content,
				    success: () => {
				        uni.showToast({
				        	title: '已复制 ' + params.title + ' 的评论',
							icon: 'none'
				        })
				    },
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						})
					}
				});
			},
			handleEmojiText (str) {
				let document = new HTMLParser(str)
				let imgs = document.getElementsByTagName('img')
				imgs.forEach(img => {
					if ( img.attributes.alt || img.attributes.title ) {
						str = str.replace(img.tagContent, '[' + (img.attributes.alt || img.attributes.title) + ']')
					}
				})
				var reg = /\[.+?\]/g;
				str = str.replace(reg, function(a,b){
					return emojis[a] || a;
				})
				return str
			},
			onItemClick (params) {
				if ( this.customclickenable ) {
					//自定义点击事件
					this.$emit('itemClick', params)
				} else {
					this.app.$business.openDetail(params)
				}
			},
			onScroll (e) {
				this.$emit('scroll', e)
			},
			backTop () {
				this.$refs.list.backTop()
			},
			getDesc (params) {
				if ( params.desc ) {
					return params.desc.trim()
				} else {
					return '这是一部来自《' + this.app.$business.filterSource(params.source).title + '》的' + this.app.$business.getType(params.type)
				}
			}
		}
	}
</script>

<style scoped>
	.badeg {
		font-size: 18rpx;
		position: absolute;
		left: 0;
		padding: 5rpx 15rpx 5rpx 10rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	}
	.item {
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}
	
	.cell_4 {
		padding: 20rpx 0;
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}
	.cell_4 .cover-box {
		position: relative;
		border-radius: 12rpx;
		width: 230rpx;
		height: 150rpx;
		margin-left: 20rpx;
	}
	.cell_4 .image {
		position: relative;
	}
	
	.yb-comment {
		padding: 20rpx;
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}
	.yb-comment .child {
		margin: 20rpx 0;
	}
	.yb-comment .child .list {
		padding: 20rpx;
	}
	.yb-comment .top .avatar {
		margin-right: 20rpx;
	}
	.yb-comment .top .info {
		height: 60rpx;
	}
	.yb-comment .bottom {
		padding-left: 80rpx;
	}
	.yb-comment .bottom .content {
		font-size: 28rpx;
		line-height: 40rpx;
		margin-top: 10rpx;
	}
	.yb-comment .bottom .more .more-text {
		font-size: 20rpx;
	}
	.yb-comment .bottom .more .arrow {
		width: 12rpx;
		height: 12rpx;
		border-bottom-width: 2rpx;
		border-right-width: 2rpx;
		margin-left: 5rpx;
	}
	.yb-comment .bottom .more .arrow-up {
		margin-top: 6rpx;
		transform: rotateZ(-135deg);
	}
	.yb-comment .bottom .more .arrow-down {
		margin-top: -6rpx;
		transform: rotateZ(45deg);
	}
</style>
